<template>
    <div style="position: absolute; width: 100%; display: flex; flex-wrap: wrap" >
        <!--平台功能导航区-->
<!--        <div style="display: flex">-->
<!--            <div>-->
<!--                博客-->
<!--            </div>-->
<!--            <div>-->
<!--                问答-->
<!--            </div>-->
<!--            <div>-->
<!--                随记-->
<!--            </div>-->
<!--            <div>-->
<!--                协作开发-->
<!--            </div>-->
<!--        </div>-->
        <!-- 左上区域 -->
        <div class="leftbox-container">
            <div class="leftbox">
                <!-- title -->
                <div class="fixed-title">
                    <router-link to="/bolg" class="router_link">
                        <strong>推荐博客</strong>
                        <el-icon class="leftbox_icon"><ArrowRight /></el-icon>
                    </router-link>
                </div>
                <!-- content list -->
                <div v-if="state.isNoBolgData || state.isNoData" class="scrollable-content" style="display: flex; align-items: center; justify-content: center" >
                    <img src="@/assets/imge/暂无数据.jpg" alt="暂无数据" style="width: 280px; height: 280px">
                </div>
                <div v-else class="scrollable-content">
                    <!--博客列表开始-->
                    <div class="blog-list">
                        <!-- 卡片 -->
                        <div class="blog-item" v-for="item in data.bolgDataList" :key="item.contentId">
                            <router-link :to="`/contentdetail/${item.contentType}/${item.contentId}`">
                            <!-- 内容主体区域 -->
                            <div class="blog-main-content">
                                    <div style="display: flex; align-items: center; justify-content: space-between">
                                        <!-- 标题 + 内容（左） -->
                                        <div :style="item.cover ? 'width: 430px' : 'width: 600px'" >
                                            <strong class="blog-title">{{ item.title }}</strong>
                                            <div class="blog-desc">{{ truncateText(stripHtml(item.content), 150) }}</div><!-- DOMPurify 库去除HTML标签 -->
                                        </div>
                                        <!-- 封面图片（右） -->
                                        <div class="blog-cover" v-if="item.cover">
                                            <el-image style="width: 100%; height: 100%; border-radius: 0.375rem" :src="item.cover" fit="cover" :preview-src-list="[item.cover]"/>
                                        </div>
                                    </div>
                                <!-- 文章信息区域（预留）：置于内容底部靠左-->
                                <div class="user-info-area">
                                    <!-- 用户信息区域 靠左 -->
                                    <div class="blog-meta">
                                        <el-avatar :src="item.user.profile_photo_path" shape="circle" :size="30" @error="errorHandler">
                                            <img
                                                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                                                alt="加载错误"/> <!--图片加载失败的回退行为-->
                                        </el-avatar>
                                        <span>{{ item.user.username }}</span>
                                    </div>
                                    <!--分类标签区域 靠右-->
                                    <div class="blog-meta">
                                        <span v-if="item.category?.categoryName || null" class="category-tag"><el-tag type="info">{{ item.category?.categoryName || null }}</el-tag></span>
                                        <span v-if="item.tags" class="tag-list"><el-tag v-for="tag in item.tags.split(',')" :key="tag" type="success">{{ tag }}</el-tag></span>
                                        <span class="publish-time">{{ item.created_at.split(' ')[0] }}</span>
                                    </div>
                                </div>
                            </div>
                            </router-link>
                        </div>
                    </div>
                    <!--博客列表结束-->
                </div>
            </div>
        </div>

        <!-- 右上区域 -->
        <div class="leftbox-container">
            <div class="leftbox">
                <!-- title -->
                <div class="fixed-title">
                    <router-link to="#" class="router_link">
                        <strong>推荐项目</strong>
                        <el-icon class="leftbox_icon"><ArrowRight /></el-icon>
                    </router-link>
                </div>
                <!-- content list -->
                <div v-if="state.isNoProjectData" class="scrollable-content" style="display: flex; align-items: center; justify-content: center" >
                    <img src="@/assets/imge/暂无数据.jpg" alt="暂无数据" style="width: 280px; height: 280px">
                </div>
                <div v-else class="scrollable-content">
                    <!--博客列表开始-->
                    <div class="blog-list">
                        <!-- 卡片 -->
                        <div class="blog-item" v-for="item in data.projectDataList" :key="item.projectId">
                            <!-- 内容主体区域 -->
                            <div class="blog-main-content">
                                <router-link :to="`/projects/${item.projectId}`">
                                    <div style="display: flex; align-items: center; justify-content: space-between">
                                        <!-- 标题 + 内容（左） -->
                                        <div style="width: 670px" >
                                            <div style="display:flex;">
                                                <el-avatar :src="item.user.profile_photo_path" shape="circle" :size="30" @error="errorHandler">
                                                    <img
                                                        src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                                                        alt="加载错误"/> <!--图片加载失败的回退行为-->
                                                </el-avatar>
                                                <strong class="blog-title">{{item.user?.username}} / {{item?.projectName}}</strong>
                                            </div>
                                            <div class="blog-desc">{{ item.description }}</div><!-- DOMPurify 库去除HTML标签 -->
                                        </div>
                                        <span style="display: flex"><img src="@/assets/icon_svg/_收藏.svg" alt="icon" style="width: 20px; height: 20px; margin-right: 5px"> {{ item.collections }}</span>
                                    </div>
                                </router-link>
                                <!-- 文章信息区域（预留）：置于内容底部靠左-->
                                <div class="user-info-area">
                                    <!--分类标签区域-->
                                    <div style="display: flex">
                                        <span style="display: flex"><img src="@/assets/icon_svg/浏览量.svg" alt="icon" style="width: 20px; height: 20px; margin-right: 5px">{{ item.views }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        <span v-if="item.category"><el-tag type="info">{{ item.category?.categoryName }}</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        <span v-else><el-tag type="info">其他</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        <span v-if="item.tags" class="tag-list"><el-tag v-for="tag in item.tags.split(',')" :key="tag" type="success">{{ tag }}</el-tag></span>
                                        <span v-else><el-tag type="success">其他</el-tag></span>
                                        <span class="publish-time">&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;{{ formatTimeAgo(item.createdAt) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 左下区域 -->
        <div class="leftbox-container">
            <div class="leftbox">
                <!-- title -->
                <div class="fixed-title">
                    <router-link to="#" class="router_link">
                        <strong>生活随记</strong>
                        <el-icon class="leftbox_icon"><ArrowRight /></el-icon>
                    </router-link>
                </div>
                <!-- content list -->
                <div v-if="state.isNoEssayData" class="scrollable-content" style="display: flex; align-items: center; justify-content: center" >
                    <img src="@/assets/imge/暂无数据.jpg" alt="暂无数据" style="width: 280px; height: 280px">
                </div>
                <div v-else class="scrollable-content">
                    <div class="blog-list">
                        <div class="blog-item" v-for="item in data.essayDataList" :key="item.contentId">
                            <router-link :to="`/contentdetail/${item.contentType}/${item.contentId}`">
                                <div class="blog-main-content">
                                    <div style="display: flex; align-items: center; justify-content: space-between">
                                        <!-- 标题 + 内容（左） -->
                                        <div :style="item.cover ? 'width: 430px' : 'width: 600px'" >
                                            <strong class="blog-title">{{ item.title }}</strong>
                                            <div class="blog-desc">{{ truncateText(stripHtml(item.content), 150) }}</div><!-- DOMPurify 库去除HTML标签 -->
                                        </div>
                                        <!-- 封面图片（右） -->
                                        <div class="blog-cover" v-if="item.cover">
                                            <el-image style="width: 100%; height: 100%; border-radius: 0.375rem" :src="item.cover" fit="cover" :preview-src-list="[item.cover]"/>
                                        </div>
                                    </div>
                                    <div class="user-info-area">
                                        <div class="blog-meta">
                                            <el-avatar :src="item.user.profile_photo_path" shape="circle" :size="30" @error="errorHandler">
                                                <img
                                                    src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                                                    alt="加载错误"/> <!--图片加载失败的回退行为-->
                                            </el-avatar>
                                            <span>{{ item.user.username }}</span>
                                        </div>

                                        <div class="blog-meta">
                                            <span v-if="item.category?.categoryName || null" class="category-tag"><el-tag type="info">{{ item.category?.categoryName || null }}</el-tag></span>
                                            <span class="publish-time">{{ item.created_at.split(' ')[0] }}</span>
                                        </div>
                                    </div>
                                </div>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右下区域 -->
        <div class="leftbox-container">
            <div class="leftbox">
                <!-- title -->
                <div class="fixed-title">
                    <router-link to="#" class="router_link">
                        <strong>高频问答</strong>
                        <el-icon class="leftbox_icon"><ArrowRight /></el-icon>
                    </router-link>
                </div>
                <!-- content list -->
                <div v-if="state.isNoQAData" class="scrollable-content" style="display: flex; align-items: center; justify-content: center" >
                    <img src="@/assets/imge/暂无数据.jpg" alt="暂无数据" style="width: 280px; height: 280px">
                </div>
                <div v-else class="scrollable-content">
                    <div class="blog-list">
                        <div class="blog-item" v-for="item in data.qaDataList" :key="item.contentId">
                            <router-link :to="`/contentdetail/${item.contentType}/${item.contentId}`">
                                <div class="blog-main-content">
                                    <div style="display: flex; align-items: center; justify-content: space-between">
                                        <!-- 标题 + 内容（左） -->
                                        <div :style="item.cover ? 'width: 430px' : 'width: 600px'" >
                                            <strong class="blog-title">{{ item.title }}</strong>
                                        </div>
                                        <!--                                        <div class="blog-cover">-->
                                        <!--<el-image style="width: 100%; height: 100%; border-radius: 0.375rem" :src="item.cover" fit="cover" :preview-src-list="[item.cover]"/>-->
                                        <!-- 跳转详情页面，同时触发富文本编辑器 -->
                                        <el-button type="primary"><el-icon :size="18"><EditPen/></el-icon>&nbsp;&nbsp;写回答</el-button>
                                        <!--                                        </div>-->
                                    </div>
                                    <div class="user-info-area" style="margin-top: 20px">
                                        <!-- 用户信息、分类标签、发布时间 -->
                                        <div class="blog-meta">
                                            <el-avatar :src="item.user.profile_photo_path" shape="circle" :size="30" @error="errorHandler">
                                                <img
                                                    src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                                                    alt="加载错误"/> <!--图片加载失败的回退行为-->
                                            </el-avatar>
                                            <span>{{ item.user.username }}</span>
                                        </div>
                                        <div class="blog-meta">
                                            <span v-if="item.category?.categoryName || null" class="category-tag"><el-tag type="info">{{ item.category?.categoryName || null }}</el-tag></span>
                                            <span class="publish-time">{{ item.created_at.split(' ')[0] }}</span>
                                        </div>
                                    </div>
                                </div>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 新用户弹窗选择标签 -->
    <el-dialog title="添加感兴趣的标签" v-model="selectTags" width="600px" destroy-on-close align-center style="min-height: 300px; max-height: 500px">
        <p>选择现有标签添加（最多添加10个）</p>
        <!-- 现有标签列表 -->
        <div class="existing-tags">
            <h4>热门标签</h4>
            <el-tag
                v-for="tag in hotTags"
                :key="tag.tagId"
                :type="tag.isSelected ? 'success' : ''"
                @click="toggleTagSelection(tag)"
                style="margin-right: 8px; margin-top: 8px; cursor: pointer">
                {{ tag.tagName }}
            </el-tag>
        </div>
        <!-- 已选标签预览 -->
        <div v-if="selectedTags.length > 0" class="selected-preview">
            <h4>已选标签</h4>
            <el-tag
                v-for="tag in selectedTags"
                :key="tag.tagId || tag.tempId"
                type="success"
                closable
                @close="handleSelectedRemove(tag)"
            >
                {{ tag.tagName }}
            </el-tag>
        </div>
        <template #footer>
            <el-button @click="selectTags = false">取消</el-button>
            <el-button type="primary" @click="submitTags">确认添加</el-button>
        </template>
    </el-dialog>
    <!-- 添加标签弹框结束 -->
</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue'
import {ArrowRight, EditPen} from "@element-plus/icons-vue";
import DOMPurify from "dompurify";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";



const selectTags = ref(false)
const hotTags = ref([]); // 从后端获取的热门标签
const selectedTags = ref([]); // 已选标签（包含现有标签和自定义标签）
const newUserSelectTags = () => {
    const dateTime = new Date()
    const created = new Date(user.created_at);
    const diffMs = dateTime - created;
    const diffSec = Math.floor(diffMs / 1000);
    const diffMin = Math.floor(diffSec / 60);
    const diffHour = Math.floor(diffMin / 60);
    selectTags.value = diffHour < 12 && user.tags === null;
}
// 初始化：打对话框时加载热门标签
watch(() => selectTags.value, (newVal) => {
    if (newVal) {
        fetchHotTags();
        resetState(); // 重置选择状态
    }
});
// 获取热门标签
const fetchHotTags = async () => {
    try {
        const res = await request.get('/api/cata/selectTagAll');
        if (res.code === '200') {
            hotTags.value = res.data.map(tag => ({
                ...tag,
                isSelected: false // 添加选中状态标记
            }));
        }
        console.log(hotTags.value)
        console.log(res.data)
    } catch (error) {
        ElMessage.error('加载标签失败');
    }
};

// 切换现有标签选中状态
const toggleTagSelection = (tag) => {
    // 先更新标签的选中状态
    tag.isSelected = !tag.isSelected;

    if (tag.isSelected) {
        // 如果是选中状态，则添加到已选标签列表
        selectedTags.value = [...selectedTags.value, tag];
    } else {
        // 如果是取消选中状态，则从已选标签列表中移除
        selectedTags.value = selectedTags.value.filter(t => t.tagId !== tag.tagId);
    }
};


// 移除已选标签
const handleSelectedRemove = (tag) => {
    if (tag.tagId) {
        // 现有标签：恢复热门标签的选中状态
        hotTags.value = hotTags.value.map(t =>
            t.tagId === tag.tagId ? { ...t, isSelected: false } : t
        );
    }
    selectedTags.value = selectedTags.value.filter(t => t !== tag);
};

// 提交标签到后端
const submitTags = async () => {
    if (selectedTags.value.length === 0) {
        ElMessage.warning('请至少选择1个标签');
        return;
    } else if(selectedTags.value.length > 10) {
        ElMessage.warning('最多选择10个标签');
        return;
    }
    try {
        // 整理标签名称为逗号分隔的字符串（如"前端技术,后端开发"）
        const tagNames = selectedTags.value.map(tag => tag.tagName).join(',');
        const res = await request.post('/api/users/addUserTags',{
            user_id: user.user_id,
            tags: tagNames
        });
        if (res.code === '200') {
            const profile = user
            ElMessage.success('标签添加成功');
            profile.tags = tagNames;
            localStorage.setItem('code_user', JSON.stringify(profile));// 更新本地存储数据
            selectedTags.value = false;
            location.reload();
        } else {
            ElMessage.error(res.msg || '标签添加失败');
        }
    } catch (error) {
        ElMessage.error('网络错误，请重试');
    }
};

// 重置状态
const resetState = () => {
    selectedTags.value = [];
    hotTags.value.forEach(tag => tag.isSelected = false);
};


// 状态管理
const state = reactive ({
    isNoBolgData: false,
    isNoQAData: false,
    isNoEssayData: false,
    isNoProjectData: false,
})
// 数据
const data = reactive({
    bolgDataList: [],
    qaDataList: [],
    essayDataList: [],
    projectDataList: [],
    allContentList: [],     // 保存所有数据
})

//获取本地存储中的用户信息
let user;
const loginUser = localStorage.getItem('code_user');
if (loginUser) {
    // 将拿到的Json数据转化为JavaScript对象
    user = JSON.parse(loginUser);
}

// 初始化加载
onMounted(() => {
    loadContents();
    loadProject();
    newUserSelectTags();
});
const errorHandler = () => true //图片加载失败的回退行为

// 加载推荐列表数据：将推荐内容保存至allContent，前端根据内容类型进行区分
const loadContents = () => {
    request.get('/api/contentRecommend', {
        params: {
            userId: user?.user_id || null // 增加可选链避免null错误
        }
    }).then(res => {
        if (res.code === '200') {
            const newList = res.data;
            // 按contentType分类
            const categorizedData = {
                bolgDataList: newList.filter(item => item.contentType === 'BOLG'),
                qaDataList: newList.filter(item => item.contentType === 'QUESTION'),
                essayDataList: newList.filter(item => item.contentType === 'ESSAY'),
            };

            // 更新各分类列表
            data.bolgDataList = categorizedData.bolgDataList;
            data.qaDataList = categorizedData.qaDataList;
            data.essayDataList = categorizedData.essayDataList;

            // 更新空数据状态
            state.isNoBolgData = data.bolgDataList.length === 0;
            state.isNoQAData = data.qaDataList.length === 0;
            state.isNoEssayData = data.essayDataList.length === 0;
            state.isNoData = newList.length === 0;
        } else {
            ElMessage.error(res.msg);
        }
    }).catch(error => {
        console.error(error);
    }).finally(() => {
        state.isLoading = false;
    });
};

// 加载项目推荐列表数据
const loadProject = () => {
    request.get('/api/projectRecommend', {
        params: {
            userId: user?.user_id || null // 增加可选链避免null错误
        }
    }).then(res => {
        if (res.code === '200') {
            data.projectDataList = res.data;
            state.isNoProjectData = data.projectDataList.length === 0;
        } else {
            ElMessage.error(res.msg);
        }
    }).catch(error => {
        console.error(error);
    }).finally(() => {
        state.isLoading = false;
    });
};


// 安全地移除HTML标签并提取纯文本
const stripHtml = (html) => {
    if (!html) return '';

    // 使用DOMPurify清理HTML，防止XSS攻击
    const clean = DOMPurify.sanitize(html);

    // 创建临时元素提取文本内容
    const temp = document.createElement('div');
    temp.innerHTML = clean;

    // 获取纯文本内容并去除多余空格
    return (temp.textContent || temp.innerText || '').trim();
};

// 截断文本并添加省略号
const truncateText = (text, length) => {
    if (text.length <= length) return text;

    // 找到最后一个完整的单词
    let truncated = text.substring(0, length);
    let lastSpace = truncated.lastIndexOf(' ');

    // 如果找到了空格，在空格处截断以避免单词被截断
    if (lastSpace !== -1) {
        truncated = truncated.substring(0, lastSpace);
    }

    return truncated + '...';
};

// 工具函数：格式化时间
const formatTimeAgo = (time) => {
    const now = new Date();
    const created = new Date(time);
    const diffMs = now - created;
    const diffSec = Math.floor(diffMs / 1000);
    const diffMin = Math.floor(diffSec / 60);
    const diffHour = Math.floor(diffMin / 60);
    const diffDay = Math.floor(diffHour / 24);

    if (diffSec < 60) {
        return `${diffSec}秒前`;
    } else if (diffMin < 60) {
        return `${diffMin}分钟前`;
    } else if (diffHour < 24) {
        return `${diffHour}小时前`;
    } else if (diffDay === 1) {
        return '昨天';
    } else if (diffDay < 7) {
        return `${diffDay}天前`;
    } else if (diffDay < 30) {
        return `${Math.floor(diffDay / 7)}周前`;
    } else {
        return `${Math.floor(diffDay / 30)}个月前`;
    }
};
</script>

<style scoped>
/*容器：*/
.leftbox-container {
    width: 50%;
    box-sizing: border-box;
}
/*盒子*/
.leftbox {
    background-color: #fffefb;
    max-height: 550px;
    overflow-y: auto;
}

/* WebKit 浏览器滚动条样式 */
.leftbox::-webkit-scrollbar {
    width: 5px;
}

.leftbox::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 5px;
}

.leftbox::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 5px;
}

/*盒子icon*/
.leftbox_icon {
    position: relative;
    left: 480px;
    bottom: -2px;
}
/*标题固定*/
.fixed-title {
    position: sticky;
    top: 0;
    background-color: #fffefb;
    z-index: 1;
    font-size: 18px;
    border-bottom: 1px #cccbc8 solid;
    width: 625px;
    padding: 18px;
    left: 10px;
}

/*可滚动内容*/
.scrollable-content {
    min-height: 100px; /* 可根据需要调整最小高度 */
}
.router_link {
    color: #333333;
}
.router_link:hover {
    color: #1677ff;
}
/*卡片样式*/
.blog-item {
    /*display: flex;*/
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    border-bottom: 2px #f5f4f1 solid;
    transition: transform 0.3s, box-shadow 0.3s;
}
.blog-item:hover {
    background-color: #f5f4f1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10); /* 轻微外阴影 */
}
/* 用户信息区域样式 */
.user-info-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 内容主体区域样式 */
.blog-main-content {
    display: flex;
    flex-direction: column;
}

/*标题样式*/
.blog-title {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    padding: 5px;
    text-overflow: ellipsis;
}
/*内容样式*/
.blog-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #4f4f4f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 限制3行 */
    padding: 10px 0;
}

/* 封面图片样式 */
.blog-cover {
    display: flex;
    align-items: center;
    width: 160px;
    height: 70px;
    right: 10px;
}

/*分类标签样式*/
.blog-meta {
    right: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #666;
    margin-left: 10px;
}
</style>


<!--<el-select-->
<!--    v-model="selectedTags"-->
<!--    multiple-->
<!--    filterable-->
<!--    remote-->
<!--    reserve-keyword-->
<!--    placeholder="请搜索添加标签..."-->
<!--    remote-show-suffix-->
<!--    :remote-method="remoteMethod"-->
<!--    :loading="loading"-->
<!--    style="width: 440px"-->
<!--&gt;-->
<!--<el-option-->
<!--    v-for="item in options"-->
<!--    :key="item.value"-->
<!--    :label="item.label"-->
<!--    :value="item.value"-->
<!--/>-->
<!--</el-select>-->

<!--// const loading = ref(false) // 加载状态控制-->
<!--// const options = ref([])  // 搜索到的标签选项-->
<!--// // 远程搜索方法-->
<!--// const remoteMethod = (query) => {-->
<!--//     if (!query) {-->
<!--//         options.value = []-->
<!--//         return-->
<!--//     }-->
<!--//     loading.value = true-->
<!--//     // 发起API请求-->
<!--//     request.get('/api/cata/selectTagAll').then(res => {-->
<!--//         loading.value = false-->
<!--//         if (res.code === '200' && res.data && res.data.length > 0) {-->
<!--//             // 转换响应数据格式，提取tagName字段-->
<!--//             hotTags.value = res.data.map(tag => ({-->
<!--//                 value: tag.tagName,-->
<!--//                 label: tag.tagName  // 使用tagName作为标签显示-->
<!--//             }))-->
<!--//             // 本地过滤标签-->
<!--//             options.value = hotTags.value.filter(item =>-->
<!--//                 item.label.toLowerCase().includes(query.toLowerCase())-->
<!--//             )-->
<!--//         } else {-->
<!--//             options.value = []-->
<!--//             ElMessage.error("未找到匹配的标签")-->
<!--//         }-->
<!--//     }).catch(error => {-->
<!--//         loading.value = false-->
<!--//         ElMessage.error("获取标签失败")-->
<!--//         console.error(error)-->
<!--//     })-->
<!--// }-->